/**
 * 分时函数（timeChunk)：让创建节点的工作分批进行。
 * 比如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点
 * 
 * 3个参数：1. 创建节点时需要用到的数据
 *         2. 封装了创建节点逻辑的函数
 *         3. 每一批创建的节点数量
 */

var timeChunk = function(ary, fn, count) {
    var obj,
        t;
    
    var len = ary.length;

    var start = function() {
        for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
            var obj = ary.shift()
            fn(obj)
        }
    }

    return function() {
        t = setInterval(() => {
            // 如果全部节点都已经创建好
            if (ary.length === 0) {
                return clearInterval(t)
            }
            start()
        }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
    }
}

// 假设我们有 1000 个好友的数据，我们利用 timeChunk 函数，每一批只往页面中创建 8 个节点：
var ary = []

for (var i = 0; i <= 1000; i++) {
    ary.push(i)
}

var renderFriendList = timeChunk(ary, function(n) {
    var div = document.createElement('div')
    div.innerHTML = n
    document.body.appendChild(div)
}, 8)

renderFriendList()